<template>
   <view class="content">
     <grid-lottery
       :itemHeight="150"
       ref="gridLotteryRef"
       style="width: 500rpx;"
       :list="lists"
       @onStart="onStart"
       @onError="onError"
       @onEnd="onEnd"
     >
       <template slot="lottery-item" slot-scope="{ test }">
         <view class="lottery-item">
           <view class="thanks">
               <image  :src="test.img || '/pages/order/static/order-process/thanks.png' " mode="aspectFit"></image>
           </view>
           <view class="desc">{{ test.name || '谢谢参与' }}</view>
         </view>
       </template>
       <view slot="start-button" class="start-button">立即抽奖</view>
       <view slot="activity-box" :class="[isStart ? 'activity-box' :'']"></view>
     </grid-lottery>
   </view>
</template>

<script>
// ### mehods

// - `start： (id: string|number, minTime: number)=>void` : 开始抽奖， 传入中奖 id，与旋转时间
// - `place: (index:number)=>{x: number, y: number}`: 获取索引定位

// ### options

// - `list: [{id: string | number, sort?: number, }]` : 列表数据, sort 为奖项实际排序， 数组长度尽量为 8/12/16/22 以此类推
// - `itemHeight: number` : 奖项外框高度
// - `itemHeightUnit: string` : 高度单位
// - `onStart: () => void` : 点击开始触发
// - `onEnd: (item: T) => void`: 抽奖结束后触发

// ## Usage Example
export default {
  name: "fu-grid-draw",
  props: {
    // 是否显示遮罩
    show: {
      type: Boolean,
      default: true
    },
   lists:{
     type:Array,
     default:[]
   },
   winning:{
     type:Number,
     default:0,
   },
    // 层级z-index
    zIndex: {
      type: [Number, String],
      default: '999'
    },

    // 用户自定义样式
    customStyle: {
      type: Object,
      default () {
        return {}
      }
    },

    // 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
    zoom: {
      type: Boolean,
      default: true
    },

    // 遮罩的过渡时间，单位为ms
    duration: {
      type: [Number, String],
      default: 300
    },

    // 是否可以通过点击遮罩进行关闭
    maskClickAble: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isStart:false,
    }
  },
  watch: {
    show(n) {

    }
  },
  computed: {

  },
  methods: {
  onError (info){
    this.$message.info(info);
  },
   onStart() {
     if(this.isStart){
       this.$message.info('该活动只能参与一次哦!')
       return
     }
     this.isStart=true
     this.$refs.gridLotteryRef.start(this.winning, 1000)
   },
   onEnd(item) {
     this.$emit('handleSelect', item);
   }
  }
}

</script>

<style lang="scss" scoped>
.content {
   width: 640rpx;
   height:600rpx;
   margin:0 auto;
   background: url('/pages/order/static/order-process/grid.png') no-repeat;
   background-size: 100% 100%;/*按比例缩放*/
   padding-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.thanks{
    width: 100rpx;
    height: 80rpx;
    image{
      width: 100%;
      height: 100%;
    }
}
.desc{
 color:$theme;
 width:80%;
 text-align: center;
 height:20px;/*需要展示行高度*/
 display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
 -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
 text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
 -webkit-line-clamp: 2;
 overflow : hidden;

}

.lottery-item {
  background: url('/pages/order/static/order-process/bg-grid.png') no-repeat ;
  border-radius: 16rpx;
  color: #fff;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border:none;
}
.activity-box {
  border-radius: 16rpx;
  border: 1px solid red;
  color:white !important;
  width: 100%;
  height: 150rpx;
  // background: linear-gradient(180deg, rgba(255, 187, 42, 0.8) 0%, rgba(255, 166, 38, 1) 100%);
}
.start-button {
  border-radius: 16rpx;
  // background-color: $theme;
   background: linear-gradient(270deg, rgba(255, 71, 24, 1) 0%, rgba(249, 34, 19, 1.0) 80%);
  color: #fff;
  text-align: center;
  font-size: 30rpx;
  line-height: 150rpx;
  font-weight: bold;
}
</style>
